 /*
 * @description: 店铺数据/评价平均星级
 * @Author: along
 * @Date: 2021-05-24
 * @Last Modified by: along
 * @Last Modified time: 2021-05-27
 */
<template>
    <el-dialog
        title="评价平均星级"
        :visible.sync="dialogVisible"
        width="365px"
        :close-on-click-modal="false"
        class="__model"
    >
        <div class="__items">
            <p class="__items_title">
                商品评价
            </p>
            <el-rate
                v-model="formData.score_goods"
                disabled
                allow-half
                disabled-void-color="rgba(219,219,219,1)"
                :colors="['rgba(233,123,52,1)', 'rgba(233,123,52,1)', 'rgba(233,123,52,1)', 'rgba(233,123,52,1)', 'rgba(233,123,52,1)']"
            />
        </div>
        <div class="__items">
            <p class="__items_title">
                物流服务
            </p>
            <el-rate
                v-model="formData.score_ship"
                disabled
                allow-half
                disabled-void-color="rgba(219,219,219,1)"
                :colors="['rgba(233,123,52,1)', 'rgba(233,123,52,1)', 'rgba(233,123,52,1)', 'rgba(233,123,52,1)', 'rgba(233,123,52,1)']"
            />
        </div>
        <div class="__items">
            <p class="__items_title">
                店铺服务态度
            </p>
            <el-rate
                v-model="formData.score_shop_service"
                disabled
                allow-half
                disabled-void-color="rgba(219,219,219,1)"
                :colors="['rgba(233,123,52,1)', 'rgba(233,123,52,1)', 'rgba(233,123,52,1)', 'rgba(233,123,52,1)', 'rgba(233,123,52,1)']"
            />
        </div>
        <div class="__items">
            <p class="__items_title">
                快递包装
            </p>
            <el-rate
                v-model="formData.score_ship_box"
                disabled
                allow-half
                disabled-void-color="rgba(219,219,219,1)"
                :colors="['rgba(233,123,52,1)', 'rgba(233,123,52,1)', 'rgba(233,123,52,1)', 'rgba(233,123,52,1)', 'rgba(233,123,52,1)']"
            />
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: 'CheckShopSatr',
    data () {
        return {
            dialogVisible: false,
            formData: {
                score_goods: 0,//商品评价
                score_ship: 0,//物流服务
                score_ship_box: 0,//快递包装
                score_shop_service: 0//店铺服务态度
            }
        };
    },
    methods: {
        /**
         * @description 显示弹窗
         */
        show (row) {
            this.getInfo(row.shop_no);
            this.dialogVisible = true;
        },

        /**
         * @description 关闭弹窗
         */
        close () {
            this.dialogVisible = false;
        },

        /**
         * @description 获取表格数据
         */
        getInfo(shop_no) {
            this.$post('/student/statistic_shop%5Cget_shop_review_info', {
                shop_no: shop_no
            }, resp => {
                if (resp.code === 1) {
                    this.formData = {
                        score_goods: resp.data.avg_score_goods,//商品评价
                        score_ship: resp.data.avg_score_ship,//物流服务
                        score_ship_box: resp.data.avg_score_ship_box,//快递包装
                        score_shop_service: resp.data.avg_score_shop_service//店铺服务态度
                    };
                } else {
                    this.$notify({
                        title: '失败',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },
    }
};
</script>

<style lang="less" scoped>
.__table {
    width: 100%;
    max-height: 424px;
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    border-left: 1px solid #EBEEF5;
    border-right: 1px solid #EBEEF5;
}
.pagination-wrapper {
    padding: 0px 24px;
    border: 1px solid #EBEEF5;
    display: flex;
    align-items: center;
    height: 56px;
    border-top: none;
    justify-content: flex-end;
    .el-pagination {
        float: right;
        padding: 0;
        background-color: transparent;
    }
}
.__items {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .__items_title {
        width: 116px;
        text-align: right;
        color: rgba(51, 51, 51, 1);
        font-size: 14px;
        margin-right: 10px;
    }
}
.el-rate__icon {
    margin-right: -2px;
}
</style>